import React, {useState, useEffect} from "react";
import {Icon, Modal, Tooltip, Form, Input, message} from "antd";
import {solveWeChatMath, solveHtml, copySafari} from "../../../utils/converter";
import {LAYOUT_ID, ENTER_DELAY, LEAVE_DELAY} from "../../../utils/constant";

const map = {
  title: "文章标题",
  desc: "文章描述",
  thumb: "文章图片链接",
  content: "文章内容",
};

const Sync = () => {
  const [showModal, setShowModal] = useState(true);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [imageUrl, setImageUrl] = useState("");

  const getPost = () => {
    return {
      title,
      desc: description,
      thumb: imageUrl,
      content: getContent(),
    };
  };

  const getContent = () => {
    const layout = document.getElementById(LAYOUT_ID); // 保护现场
    let html = layout.innerHTML;
    solveWeChatMath();
    html = solveHtml();
    layout.innerHTML = html; // 恢复现场
    return html;
  };

  const getError = (post) => {
    const errorKey = Object.entries(post).filter((item) => !item[1]);
    if (errorKey.length) {
      const desc = map[errorKey[0][0]] || "";
      return desc ? `${desc}不能为空` : "请输入必填信息";
    }

    return "";
  };
  // 同步
  const doSync = () => {
    const post = getPost();
    const error = getError(post);
    if (error) {
      message.error(error);
      return;
    }

    window.syncPost(post);
    console.log("开始同步操作");
  };

  const imageNode = (
    <>
      <span>{map.thumb}</span>
      <a
        style={{marginLeft: "10px"}}
        rel="noopener noreferrer"
        target="_blank"
        href="https://zhihui.woa.com/platform/paas/smart-cover"
      >
        前往生成
      </a>
    </>
  );
  return (
    <div>
      <Tooltip placement="left" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title="同步文章到其它平台">
        <a id="nice-sidebar-juejin" className="nice-btn-juejin" onClick={() => setShowModal(true)}>
          <Icon type="sync" />
        </a>
      </Tooltip>
      <Modal
        title="文章同步"
        visible={showModal}
        okText="立即同步"
        cancelText="取消"
        width={680}
        onOk={doSync}
        onCancel={() => setShowModal(false)}
      >
        <Form>
          <Form.Item label={map.title}>
            <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder={`请输入${map.title}`} />
          </Form.Item>
          <Form.Item label={map.desc}>
            <Input.TextArea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder={`请输入${map.desc}`}
            />
          </Form.Item>
          <Form.Item label={imageNode}>
            <Input value={imageUrl} onChange={(e) => setImageUrl(e.target.value)} placeholder={`请输入${map.thumb}`} />
          </Form.Item>
          {imageUrl && (
            <Form.Item>
              <img referrerpolicy="no-referrer" src={imageUrl} alt="预览" style={{maxWidth: "100%"}} />
            </Form.Item>
          )}
        </Form>
      </Modal>
    </div>
  );
};

export default Sync;
